<template>
	<view id="app">
		<view class="xuanze">
			<view @click="goBack()">取消</view>
			<view class="publish" @click="submit()">发表</view>
		</view>
		<view class="testarea">
			<u--textarea v-model="content" placeholder="闲置物品信息..." border="none" height="100"></u--textarea>
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"
				width="90" height="90"></u-upload>
		</view>
		<view class="options">
			<view class="option-item">
				<image src="@/static/public/orientation.png" mode="widthFix"></image>
				<text>所在位置</text>
				<text class="visibility" @click="getAddress()">
				  {{ address.address || (user.city && user.city.name) || "默认地址" }}
				</text>
				<image class="path" src="@/static/public/right_arrow.png" mode="widthFix" @click="getAddress()"></image>
			</view>
			<view class="option-item">
				<image src="@/static/public/mine.png" mode="widthFix"></image>
				<text>磨损程度</text>
				<text class="visibility" @click="online.show = true">{{online.select}}</text>
				<image class="path" src="@/static/public/right_arrow.png" mode="widthFix" @click="online.show = true">
				</image>
			</view>
			<view class="option-item">
				<image src="@/static/public/mine.png" mode="widthFix"></image>
				<text>价格</text>
				<text class="input-text">
					<input type="text" id="currency" placeholder="￥0.00">
				</text>
				<image class="path" src="@/static/public/right_arrow.png" style="height: 13px;"></image>
				</image>
			</view>
			<view class="option-item">
				<image src="@/static/public/mine.png" mode="widthFix"></image>
				<text>发货方式</text>
				<text class="visibility" @click="online1.show = true">{{online1.select}}</text>
				<image class="path" src="@/static/public/right_arrow.png" mode="widthFix" @click="online1.show = true">
				</image>
			</view>
		</view>
		<u-action-sheet :actions="online.list" @select="onlineSelect" :show="online.show"
			@close="online.show = false"></u-action-sheet>
		<u-action-sheet :actions="online1.list" @select="onlineSelect1" :show="online1.show"
			@close="online1.show = false"></u-action-sheet>
	</view>
</template>

<script>
	import {
		rear
	} from '@/config/api.js';
	export default {
		data() {
			return {
				content: '',
				fileList: [],
				lists: [],
				address: {
					address: ""
				},
				online: {
					show: false,
					select: '99新',
					list: [{
							name: '99新'
						},
						{
							name: '95新'
						},
						{
							name: '9成新'
						},
						{
							name: '8成新'
						},
						{
							name: '7成新'
						}
					]
				},
				online1: {
					show: false,
					select: '快递包邮',
					list: [{
							name: '快递包邮'
						},
						{
							name: '货到付款'
						},
						{
							name: '定金支付'
						}
					]
				},
				user: {},
				isSubmit: true
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			submit() {
				if (this.isSubmit) {
					this.isSubmit = false;

					if (this.content == '') {
						uni.showToast({
							title: '内容不能为空',
							icon: 'none',
							duration: 2000,
						})
						return;
					}
					if (this.address.address == null || this.address.address == '') {
						this.address.name = this.user.city.fullname
						this.address.address = this.user.city.name
					}
					let type = 0
					switch (this.online.select) {
						case "99新":
							type = 0;
							break;
						case "95新":
							type = 1;
							break;
						case "9成新":
							type = 2;
							break;
						case "8成新":
							type = 3;
							break;
						case "7成新":
							type = 4;
					}

					let type1 = 0
					switch (this.online1.select) {
						case "快递包邮":
							type1 = 0;
							break;
						case "货到付款":
							type1 = 1;
							break;
						case "定金支付":
							type1 = 2;
							break;
					}

					let picture = []
					const uploadTasks = [];
					for (let i = 0; i < this.lists.length; i++) {
						uploadTasks.push(new Promise((resolve, reject) => {
							uni.uploadFile({
								url: rear + '/file/upload',
								filePath: this.lists[i].url,
								name: 'file',
								success: (res) => {
									picture.push("https://item-kf.oss-cn-hangzhou.aliyuncs.com/" +
										JSON.parse(res.data).data);
									resolve();
								}
							});
						}));
					}
					Promise.all(uploadTasks).then(() => {
						uni.request({
							url: rear + "/tweet/addTweet",
							method: "POST",
							data: {
								userId: this.user.id,
								content: this.content,
								picture: JSON.stringify(picture),
								address: this.address.name,
								detailsAddress: this.address.address,
								type: type
							},
							success: (res) => {
								if (res.data.data) {
									uni.showToast({
										title: '发布成功',
										icon: 'none',
										duration: 2000
									});
									this.isSubmit = true;
									uni.setStorageSync('forumRefresh', true);
									uni.switchTab({
										url: "../forum/index",
									});
								} else {
									this.isSubmit = true;
									uni.showToast({
										title: '发布失败',
										icon: 'none',
										duration: 2000,
									})
								}
							}
						})
					});

				}

			},
			onlineSelect(index) {
				this.online.select = index.name
				this.online.show = false
			},
			onlineSelect1(index) {
				this.online1.select = index.name
				this.online1.show = false
			},
			getAddress() {
				uni.chooseLocation({
					success: res => {
						console.log(res)
						this.address = res;
						this.address.address = res.name
						uni.request({
							url: "https://restapi.amap.com/v3/geocode/regeo",
							method: "GET",
							data: {
								output: "json",
								location: this.address.longitude + "," + this.address.latitude,
								key: "29fba64b6474d5732699b53c09a3129e"
							},
							success: (add) => {
								this.address.name = "中华人民共和国" +
									add.data.regeocode.addressComponent.province + add.data
									.regeocode.addressComponent.city + add.data.regeocode
									.addressComponent.district;
							}
						})
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
				this[`lists`].splice(event.index, 1)
			},
			// 新增图片
			afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item
					})
				})
				for (var i = 0; i < lists.length; i++) {
					this.lists.push(lists[i])
				}
			},

		},
		onShow() {
			this.user = uni.getStorageSync('user');
		}
	}
</script>

<style lang="scss" scoped>
	#app {
		width: 100vw;
		height: 100vh;
		padding: 100rpx 15rpx 0 15rpx;
		box-sizing: border-box;

		.xuanze {
			margin: 0 0 15px 0;
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;

			view {
				width: 45px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				color: #838383;
				font-size: 13px;
			}

			.publish {
				color: white;
				background: #f9943c;
				border-radius: 5px;
			}
		}

		.testarea {
			margin: 0 20px;
		}

		.options {
			margin-top: 10px;
			border-radius: 10px;
			padding: 10px 0;
			border: none;
		}

		.option-item {
			display: flex;
			align-items: center;
			padding: 15px 20px;
			border-top: 1px solid #f0f0f0;

			image {
				width: 15px;
				margin-right: 10px;
			}

			.path {
				width: 6px;
				position: absolute;
				right: 2%;
			}

			.input-text {
				margin-left: 67%;
				width: 13%;
				display: flex;
				flex-wrap: wrap;
			}
		}

		.option-item:last-child {
			border-bottom: 1px solid #f0f0f0;
		}

		.icon {
			font-size: 20px;
			color: #666;
			margin-right: 15px;
		}

		.visibility {
			margin-left: auto;
			color: #888;
			font-size: 15px;
		}
	}
</style>